<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header">
        <button class="btn btn-bg2">添加视频</button>
        <div class="search">
          <label>查询条件</label>
          <el-input v-model="input" placeholder="关键词搜索" class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData">
          <el-table-column show-overflow-tooltip prop="zip" label="视频名称" min-width="300">
            <template #default="scope">
              <div class="part">
                <div class="name">{{ scope.row.zip }}</div>
                <el-popover placement="left" :width="200" trigger="hover">
                  <template #reference>
                    <el-icon size="24px"><Picture /></el-icon>
                  </template>
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="scope.row.img"
                    fit="contain"
                  />
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="点击数" width="120" />
          <el-table-column show-overflow-tooltip prop="name" label="关联品牌" width="120" />
          <el-table-column show-overflow-tooltip prop="name" label="关联品类" width="120" />
          <el-table-column show-overflow-tooltip prop="name" label="关联产品" width="120" />
          <el-table-column show-overflow-tooltip prop="name" label="创建时间" width="200" />
          <el-table-column show-overflow-tooltip prop="name" label="更新时间" width="200" />
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
            <template #default>
              <div class="btns">
                <button class="btn-table bgColor1">预览</button>
                <button class="btn-table bgColor2">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina"> <Pagination /></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import pageComponentName from '@/config/page-component-name'
  import { Search } from '@element-plus/icons-vue'
  import { ref } from 'vue'

  defineOptions({
    name: pageComponentName.setting.videoSet,
  })

  const input = ref('')

  const tableData = [
    {
      date: '2023-06-26 11:56:35',
      name: '20230626295598983',
      state: '待处理',
      city: 'Los Angeles',
      address: '上海市-市辖区-虹口区-嘉兴路街道-666666',
      zip: '【成品】美的 空调 BM-DD-895-001 默认规格',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-03',
      name: 'Tom111',
      state: '处理中',
      state2: '未入/出库',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '【成品】美的 空调 BM-DD-895-001 默认规格',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom222',
      state: '已完成',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '【成品】美的 空调 BM-DD-895-001 默认规格',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-01',
      name: 'Tom333',
      state: '已取消',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '【成品】美的 空调 BM-DD-895-001 默认规格',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-03',
      name: 'Tom444',
      state: '处理中',
      state2: '未入/出库',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom555',
      state: '处理中',
      state2: '未入/出库',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-04',
      name: 'Tom666',
      state: '处理中',
      state2: '未入/出库',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom777',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-03',
      name: 'Tom888',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom999',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-04',
      name: 'Tom000',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tomppp',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index';
</style>
